import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class AnimationTransitionPage extends StatefulWidget {
  const AnimationTransitionPage({super.key});

  @override
  State<AnimationTransitionPage> createState() =>
      _AnimationTransitionPageState();
}

class _AnimationTransitionPageState extends State<AnimationTransitionPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 5000),
      vsync: this,
      lowerBound: 0.1,
      upperBound: 1,
    );
    // ..repeat();
    _controller.addListener(() {
      if (kDebugMode) {
        print(_controller.value);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AnimationTransitionPage'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SlideTransition(
                // turns: _controller,
                // opacity: _controller,
                // scale: _controller.drive(Tween(begin: 0.5, end: 2.1)),
                // position: _controller.drive(
                //   Tween(
                //     begin: const Offset(-0.5, -0.5),
                //     end: const Offset(0.5, 0.5),
                //   ),
                // ),
                position: Tween<Offset>(
                  begin: const Offset(-2, -2),
                  end: const Offset(0.5, 2),
                )
                    .chain(CurveTween(curve: Curves.bounceInOut))
                    .chain(CurveTween(curve: const Interval(0.4, 0.6)))
                    .animate(_controller),
                child: const FlutterLogo(
                  size: 60,
                )),
            const SizedBox(
              height: 40,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward();
                  },
                  child: const Text("开始"),
                ),
                ElevatedButton(
                  onPressed: () {
                    _controller.reverse();
                  },
                  child: const Text("倒序一次"),
                ),
                ElevatedButton(
                  onPressed: () {
                    _controller.stop();
                  },
                  child: const Text("停止"),
                ),
                ElevatedButton(
                  onPressed: () {
                    _controller.reset();
                  },
                  child: const Text("重置"),
                ),
              ],
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // _controller.forward();
          // _controller.stop();
          // _controller.reset();
          _controller.repeat(
            reverse: true,
          );
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}
